<template>
  <div ref="pieDom" style="height: 240px; width: auto"></div>
</template>
<style scoped></style>
<script>
import { getBar } from "../api/mainApi";
const option = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      type: "pie",
      radius: "50%",
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

export default {
  name: "Pie",
  mounted() {
    this.getData();
    this.mychart = this.$echarts.init(this.$refs.pieDom);
    this.mychart.setOption(option);
  },
  computed: {
    myChart() {
      return this.$echarts.init(this.$refs.pieDom);
    },
  },
  methods: {
    getData() {
      getBar(2015, 2020, (res) => {
        console.log(res);
        // let arr = [];
        // res.forEach((item) => {
        //   arr.push({
        //     name: item.term,
        //     value: item.num,
        //   });
        // });

        option.series[0].data = res;
        this.mychart.setOption(option);
      });
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>
